<!--
 * @Author: wuchao66_Git 2803670835@qq.com
 * @Date: 2023-02-18 11:21:46
 * @LastEditors: wuchao66_Git 2803670835@qq.com
 * @LastEditTime: 2023-02-24 14:45:52
 * @FilePath: \t154appxg\src\views\user\user.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEt
-->
<template>
  <div>
    <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">
  <el-form ref="form" :model="userVO" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="部门">
                <el-select
                  v-model="userVO.departmentId"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in departmentList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    clearable
                  >
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px"
                      ><el-tag type="danger" size="mini">{{
                        item.departcount
                      }}</el-tag></span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户名">
                <el-input v-model="userVO.username" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮箱">
                <el-input v-model="userVO.email" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别">
                <el-radio-group v-model="userVO.sex">
                  <el-radio :label="0">男</el-radio>
                  <el-radio :label="1">女</el-radio>
                  <el-radio :label="''">全部</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="昵称">
                <el-input v-model="userVO.nickname" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-button type="primary" icon="el-icon-refresh" @click="reset"
                >重置</el-button
              >
              <el-button type="success" icon="el-icon-search" @click="search"
                >查询</el-button
              >
              <el-button type="info" icon="el-icon-plus" @click="addUser"
                >添加</el-button
              >
              <el-button
                type="warning"
                icon="el-icon-download"
                @click="exportExcel"
                >导出</el-button
              >
            </el-col>
          </el-row>
        </el-form>
     <!-- 表格 -->
      <!--表格内容显示区域-->
      <el-table :data="userList" border max-height="400" style="width: 100%">
        <el-table-column prop="id" label="#" width="50"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="110">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
          <!-- 如何获取循环的对象 useList  双重三元表达式 -->
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "保密" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="departName"
          sortable
          label="所属部门"
          width="180"
        >
        </el-table-column>
        <el-table-column sortable prop="birth" label="生日" width="180">
        </el-table-column>
        <el-table-column sortable prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="150">
        </el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <!-- scope表示当前表中的一行数据 -->
          <template slot-scope="scope">
            <!-- scope.row表示这一行的对象 -->
            <el-switch
              v-model="scope.row.status"
              active-color="#ff4949"
              inactive-color="#cccccc"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-s-tools"
          ></el-button>
        </el-table-column>
      </el-table>
         <!-- 分页 -->
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1,5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- 父传子 -->
        <UserAdd :addOrUpdateVisible="addOrUpdateVisible"
        :departmentList="departmentList"
        @changeShow="showAddOrUpdate"></UserAdd>
</el-card>
  </div>
</template>

<script>
import {findUserList,exportUserInfo} from '../../api/user'
import {findDepartMent} from '../../api/department'
import UserAdd from '../../views/user/UserAdd.vue'
export default {
  components:{
    UserAdd
  },
  data:function(){
    return{
        userVO:{
          departmentId: "",
        username: "",
        email: "",
        sex: "",
        nickname: "",
        },
        currentPage:1,
        pageSize:5,
        userList:[],
        total:82,
        departmentList: [],
  // 控制新增编辑弹窗的显示与隐藏
  addOrUpdateVisible: false,
    }
  },
  methods:{
    showAddOrUpdate(data){//子传父，回来的值进行关闭
        if(data==="false"){//父传子
            this.addOrUpdateVisible=false;
        }else{
          this.addOrUpdateVisible=true;
        }
    },
    //导出的前端方法
    async exportExcel() {
      exportUserInfo(this.userVO).then(res => {
        //这里没有返回数据,但是要在响应头中进行下载操作
        // 将二进制文件转化为可访问的url
        let url = window.URL.createObjectURL(new Blob([res]));
        //创建了一个a标签的超链接
        var a = document.createElement("a");
        //将a标签添加到body内容中
        document.body.appendChild(a);
        a.href = url;
        a.download = "用户列表.xls";
        a.click();
        window.URL.revokeObjectURL(url);
    }).catch(err => {
      console.log(err);
    })
    },
    reset(){
      this.userVO={};
    },
    search(){
      this.userList=[];
      this.getUserList();
    },
    addUser(){
      //你做的
      this.addOrUpdateVisible=true;
    },
  
    async getDepartMent(){
      let res= await findDepartMent();
    this.departmentList=res.data.  deptList;
      console.log(res);
    },
    async getUserList(){
     let res= await findUserList(this.currentPage,this.pageSize,this.userVO);
      console.log(res);
      this.userList=res.data.userList.records;
      this.total=res.data.userList.total;
    },  handleSizeChange(val) {
        this.pageSize = val;
        this.getUserList();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getUserList();
        console.log(`当前页: ${val}`);
      },
  },
  created(){
    this.getUserList();
    this.getDepartMent();
  }

}
</script>

<style>
   .el-breadcrumb {
    margin-bottom: 10px;
  }
  .el-input,
  .el-select {
    width: 210px;
  }
  
  .el-pagination {
    margin-top: 10px;
  }
  .el-table-column{
    height: 20px;
  }
</style>